<template>
    <div>
        <div class="cp-header">
            <div class="cp-main-box">
                <a href="/" class="cp-logo">
                    <!-- 主页logo -->
                    <img src="/img/logo.png">
                </a>
                <div class="layui-nav headerRight"  lay-filter="">
                    <!-- 搜索框 -->
                    <div class="cp-header-search">
                        <input id="searchBox" @keyup="search" placeholder="搜索书名" v-model="searchContent">
                        <a href="javascript:" class="iconfont icon-search"></a>
                    </div>

                    <div class="cp-header-link">
                        <!-- 跳转充值页面 -->
                        <a href="javascript:"></a>
                        <a href="javascript:"></a>
                        <a href="javascript:"></a>
                        <a href="javascript:"></a>
                        <a href="javascript:"></a>
                    </div>
                    <div class="cp-header-user" id="cpHeaderUser" v-show="!logged">
                        <a href="/register">注册</a>
                        <span></span>
                        <a href="" @click.prevent="loginDialogVisible = true">登录</a>
                    </div>
                    <div class="layui-nav-item" id="userMsgBox" v-show="logged" style="">
                        <!-- 跳转用户个人中心 -->
                        <a href="/user/info">
                            <i class="iconfont icon-dengpao"></i>
                            <!-- 用户头像（可选） -->
                            <img src="/img/default_head.png" class="layui-nav-img header">
                            <!-- 用户名 -->
                            <span class="userName cp-ellipsis" v-text="userName"></span>
                            <!-- 更多 -->
                            <span class="layui-nav-more"></span>
                        </a>

                        <dl class="layui-nav-child" id="userMsgChild">
                            <dd>
                                <a href="javascript:" @click="logout()">
                                    <i class="iconfont icon-tuichu"></i>
                                    退出
                                </a>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
            <!-- 模态框 -->
            <el-dialog :close-on-click-modal="false" title="用户登录" :visible.sync="loginDialogVisible" width="20%">
                <el-form :model="loginForm" status-icon ref="ruleForm" label-width="0" class="demo-ruleForm">
                    <el-form-item prop="tel">
                        <el-input v-model.number="loginForm.userTel" placeholder="请输入电话"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" v-model="loginForm.password" autocomplete="off" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="singIn" id="loginBtn">立即登录</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
        <div class="cp-main-box" id="vueBox">
        <div class="cp-register-form">
            <div class="cp-register-tab">
                <a href="javascript:;" class="active">申请作者</a>
            </div>
            <el-form class="formReg" :model="registerForm" :hide-required-asterisk="true" ref="registerFormRef" :rules="registerFormRules" label-width="100px">
                <el-form-item label="笔名" prop="penName">
                    <el-input placeholder="请输入" v-model="registerForm.penName"></el-input>
                </el-form-item>
				<el-form-item label="真实姓名" prop="name">
					<el-input placeholder="请输入" v-model="registerForm.name"></el-input>
				</el-form-item>
                <el-form-item label="身份证号码" prop="idCard">
                	<el-input placeholder="请输入" v-model="registerForm.idCard"></el-input>
                </el-form-item>
                <el-form-item label="银行卡号" prop="bankCard">
                	<el-input placeholder="请输入" v-model="registerForm.bankCard"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="register">立即注册</el-button>
                </el-form-item>
            </el-form>
        </div>
        </div>
        <Footer></Footer>
    </div>
    
</template>
<script>
import Footer from '../components/Footer'
import $ from 'jquery'

export default {
    name: 'Register',
    components: {
		Footer
    },
    data() {
        return {
			// 验证是否通过
			flag: false,
            // 登录模态框可见
            loginDialogVisible: false,
            // 登录表单
            loginForm: {
                userTel: "",
                password: ""
            },
            // 搜索内容
            searchContent: "",
            // 注册表单
            checkPass: "",
            registerForm: {
                penName: "",
                name: "",
				idCard: "",
				bankCard: ""
            },
            // 预验证
            registerFormRules: {
                penName: [
					{validator: this.validatePenName, trigger: "blur"}
                ],
                name: [
                    {required: true, message: "请输入姓名", trigger: "blur"},
                    {min: 2, max: 5, message: "2-5位", trigger: "blur"}
                ]
            }
        }
	},
    mounted() {
        layui.use('element');
    },
    computed: {
        // 登录状态
        logged: function () {
            return (this.userName != null);
        },
        // 用户名
        userName: function () {
            return sessionStorage.getItem("userName");
        }
    },
    methods: {
        // 搜索
        search() {
            // alert(this.searchContent)
        },
        // 登录
        singIn() {
            let _this = this;
            $.ajax({
                url: "http://localhost/user/login",
                type: "POST",
                data: _this.loginForm,
                success: function (res) {
                    // 判断响应码
                    if (res.code != 200) {
                        // 错误提示信息
                        _this.$message.error(res.message);
                        return;
                    }
                    // 登录成功提示信息
                    _this.$message.success("登录成功");
                    // 关闭模态框
                    _this.loginDialogVisible = false;
                    // 将返回数据存入session
                    sessionStorage.setItem("userId", res.data.userId);
                    sessionStorage.setItem("userName", res.data.userName);
                    // 存入作者Id
                    if (res.data.authorId != null) {
                        sessionStorage.setItem("authorId", res.data.authorId);
                    }
                    location.reload();
                }
            });
        },
        // 注销
        logout() {
          sessionStorage.clear();
          location.reload();
        },
        // 验证笔名是否存在
        validatePenName (rule, value, callback) {
			let isExistis = true;
			$.ajax({
				url: "http://localhost/author/register/" + value,
				async: false,
				success: res => {
					isExistis = res;
				}
			});
			if (!isExistis) {
				callback(new Error("笔名重复"))
			} else if (value === "") {
				callback(new Error("请输入笔名"))
			} else if (value.length < 2 || value.length > 6) {
				callback(new Error("笔名 2-6位"))
			}
        },
        // 注册
        register() {
            let _this = this;
			// 取出用户id
			let userId = sessionStorage.getItem("userId");
			$.ajax({
			    url: "http://localhost/author/authorRegister",
			    type: "POST",
			    data: {
					"penName": _this.registerForm.penName,
					"name": _this.registerForm.name,
					"idCard": _this.registerForm.idCard,
					"bankCard": _this.registerForm.bankCard,
					"userId": userId,
				},
			    success: function (res) {
			        // 判断是否成功
					if (res.code != 200) {
						_this.$notify.success(res.message);
						return;
					}
			        _this.$notify.success(res.data);
			    }
			});
        }
    }
}
</script>
<style scoped>
    .el-button {
        background-color: #51c29a;
        border: #51c29a 1px solid;
        width: 100%;
        border-radius: 3px;
    }
    .formReg {
        font-size: 14px;
        margin-top: 30px;
        margin-left: 200px;
    }
    .formReg .el-input {
        width: 300px;
    }
    .formReg .el-button {
        background-color: #51c29a;
        border: #51c29a 1px solid;
        width: 300px;
    }
    .el-button:hover {
        background-color:#7adbbb;
        border: #7adbbb solid 1px;
    }
    .loginBoxTitle {
        bottom: 20px;
    }
</style>